Page({
  data: {
    imageUrl: '', //要裁剪的图片
    lockRatio: false, //锁定比例
    edgeColor: '#fff', //边缘线颜色
    startCutting: 0, //开始裁剪
    rotateAngle: 0, //旋转角度
    lockWidth: false, //裁剪框宽度锁定
    lockHeight: false, //裁剪框高度锁定
    disableRotate: true, //是否禁用触摸旋转 组件默认是true
    limitMove: false //是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)
  },

  choose() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        const tempFilePaths = res.tempFilePaths[0];
        this.setData({
          imageUrl: tempFilePaths
        })
      }
    });
  },
  btnCropper() {
    this.setData({
      startCutting: this.data.startCutting + 1
    })
  },
  cropper(e) {
    //裁剪完成后处理逻辑
    wx.previewImage({
      current: '', // 当前显示图片的http链接
      urls: [e.detail.url] // 需要预览的图片http链接列表
    });
  },
  back() {
    wx.navigateBack();
  },
  setedgeColor(e) {
    let type = Number(e.currentTarget.dataset.type)
    this.setData({
      edgeColor: ['#5677fc', '#EB0909', '#19be6b', '#ffffff', '#ff7900'][type]
    })
  },
  rotate() {
    if (!this.data.imageUrl) return;
    this.setData({
      rotateAngle: this.data.rotateAngle + 90
    })
  },
  switchChange(e) {
    let type = Number(e.currentTarget.dataset.type)
    switch (type) {
      case 1:
        this.setData({
          lockWidth: e.detail.value
        })
        break;
      case 2:
        this.setData({
          lockHeight: e.detail.value
        })
        break;
      case 3:
        this.setData({
          lockRatio: e.detail.value
        })
        break;
      case 4:
        this.setData({
          disableRotate: !e.detail.value
        }, () => {
          if (!this.data.disableRotate) {
            this.setData({
              limitMove: false
            })
          }
        })

        break;
      case 5:
        this.setData({
          limitMove: e.detail.value
        }, () => {
          if (this.data.limitMove) {
            this.setData({
              disableRotate: true
            })
          }
        })
        break;
      default:
        break;
    }
  }
})